<template>
	<div style="background: #e9edf6; padding: 20px; margin-top: 20px">
		<div class="pageContentBox">
			<div class="headTop"><span class="notTop">网上报名审核</span></div>
			<hr class="right-hr" />
			<div class="content-head">
				<div>
					<span class="head-span">招生季</span>
					<a-cascader class="condition" :options="quarter" placeholder="默认当前招生季" v-model="quarterId" />

					<span class="head-span">专业部</span>
					<a-cascader class="condition" :options="faculty" placeholder="请选择" @change="facultyChange"
						v-model="facultyId" />

					<span class="head-span">专业</span>
					<a-cascader class="condition" :options="specialty" placeholder="请选择" v-model="specialtyId" @click='cascaderChange'/>

					<a-button class="icon_btn clear-button" size="small" @click="clear">
						<span class="flex_box">
							<img src="@/assets/img/clean.png" class="icon-position" />
							清除
						</span>
					</a-button>
				</div>
			</div>

			<div class="content-head">
				<div>
					<a-input class="condition-input" v-model="keyword" />

					<a-cascader class="condition select" :options="keys" placeholder="姓名" v-model="keysVal" />
					<span class="head-span">是否审核</span>
					<a-cascader class="condition select" :options="isAdmition" placeholder="全部"
						v-model="isAdmitionVal" />

					<a-button class=" search-button icon_btn"  size="small" @click="search">
						<span class="flex_box">
							<icon-font type="iconsousuo" style="color: #ffffff" />
							搜索
						</span>
					</a-button>

					<a-button class="icon_btn clear-button" size="small" @click="empty">
						<span class="flex_box">
							<icon-font type="iconqingkong1" style="color: #ffffff" />
							清空
						</span>
					</a-button>
					
				</div>
			</div>

			<div class="content-head">
				<div>
<!-- 					<a-button class="icon_btn_type_2" style="background: #00D09D" size="small">
						<span class="flex_box">
							<img src="@/assets/img/daochu.png" class="icon-position" />
							批量导出
						</span>
					</a-button> -->
					
					<a-button class="icon_btn_type_2" style="background: #00BAD0" size="small" @click='batchExamine'>
						<span class="flex_box">
							<icon-font type="icontianjia" style="color: #ffffff" />
							批量审核
						</span>
					</a-button>
					
					
					<a-modal v-model="visibleReport" title="提示" @ok="handleOkReport" :width="478">
						<div class="img-bg"><img src="@/assets/img/duihao.png" class="duihao-img" /></div>
						<div class="report-text">确认要批量审核吗?</div>
						<template slot="footer">
							<a-button key="back" @click="handleOkReport" class="btn"> 确定 </a-button>
							<a-button key="submit" type="primary" @click="closeReport" class="btn-cancle"> 取消
							</a-button>
						</template>
					</a-modal>

					<a-button class="icon_btn refresh-button" size="small">
						<span class="flex_box">
							<img src="@/assets/img/shuaxin.png" class="icon-position" />
							刷新
						</span>
					</a-button>
					
<!-- 					<a-button class="icon_btn_type_2" style="background: #00D09D" size="small" @click='batchPass'>
						<span class="flex_box">
							<img src="@/assets/img/nextBtn.png" class="icon-position" />
							通过
						</span>
					</a-button>
					
					<a-button class="icon_btn_type_2" style="background: #FC8950" size="small" @click='batchNoPass'>
						<span class="flex_box">
							<img src="@/assets/img/overBtn.png" class="icon-position" />
							不通过
						</span>
					</a-button> -->
				</div>
			</div>
			<div>
				<a-table :columns="columns" :data-source="data" :row-selection="rowSelection" :defaultCurrent="6"
					:pagination="pagination" @change="tableChange">
					<span slot="operator" slot-scope="text, record">
						<a class="text-btn-color2" style="border-bottom: 1px solid #66c3fd"
							@click="showMsg(record)">查看</a>
					</span>
				</a-table>
			</div>
		</div>

		<!-- start -->
		<a-modal v-model="visible" title="查看招生信息" on-ok="handleClose" :width="1073">
			<!-- 不打印区域 -->

			<template slot="footer">
				<a-button key="back" v-print="'#printContent'" class="btn"> 打印 </a-button>
				<a-button key="submit" type="primary" :loading="loading" @click="handleClose" class="btn-cancle">
					关闭
				</a-button>
			</template>
			<div ref="print" id="printContent">
				<table class="scanTable" style="text-align: left">
					<tr>
						<td colspan="4" class="tr-color">
							<span class="title-style">基本信息</span>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">姓名</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.xm"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">身份证号</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.sfzh"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">曾用名</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.cym"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">性别</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObjTwo.XBM"></a-input>
						</td>
					</tr>
					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">出生日期</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.csrq"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">政治面貌</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.zzmmm"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">籍贯</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.jg"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">民族</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.mzm"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">健康状况</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.jkzkm"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">毕业学校</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.byxx"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">户口类别</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.hklbm"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">是否低保</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.sfdb"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">招生类型</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.zslx"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">准考证号</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.zkzh"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">考生号</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.ksh"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">考试总分</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.kszf"></a-input>
						</td>
					</tr>
				</table>

				<table class="scanTable" style="text-align: left; margin-top: 20px">
					<tr>
						<td colspan="4" class="tr-color">
							<span class="title-style">报名信息</span>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">专业部</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObjTwo.YXMC"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">专业</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObjTwo.ZYMC"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">学制</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObjTwo.XZ"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">入学年月</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.rxny"></a-input>
						</td>
					</tr>
					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">层次</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.ccm"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">就读方式</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.jdfs"></a-input>
						</td>
					</tr>
				</table>

				<table class="scanTable" style="text-align: left; margin-top: 20px">
					<tr>
						<td colspan="4" class="tr-color">
							<span class="title-style">联系方式</span>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">详细家庭地址</div>
						</td>
						<td colspan="3" class="double">
							<a-input read-only class="input-style" v-model="entityObj.jtdz"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">家庭邮编</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.jtyb"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">家庭联系电话</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.jtlxdh"></a-input>
						</td>
					</tr>
					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">户籍所在地</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.county"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">学生联系电话</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.xslxdh"></a-input>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">电子邮箱</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.dzxx"></a-input>
						</td>
						<td class="td-div">
							<div class="font-style">即时通讯号</div>
						</td>
						<td class="double">
							<a-input read-only class="input-style" v-model="entityObj.jstxh"></a-input>
						</td>
					</tr>

					<tr>
						<td colspan="4" class="tr-color">
							<span class="title-style">其他信息</span>
						</td>
					</tr>

					<tr class="tr-style">
						<td class="td-div">
							<div class="font-style">特长</div>
						</td>
						<td colspan="3" class="double">
							<a-input read-only class="input-style" v-model="entityObj.tc"></a-input>
						</td>
					</tr>
				</table>
			</div>
		</a-modal>
		<!-- end -->
	</div>
</template>


<script>
	import {
		Icon
	} from 'ant-design-vue'

	import {
		axios
	} from '@/utils/request'

	const IconFont = Icon.createFromIconfontCN({
		scriptUrl: '//at.alicdn.com/t/font_2390461_f6v2cx4wmzq.js',
	})

	const columns = [{
			title: '姓名',
			dataIndex: 'XM',
			key: 'XM',
		},
		{
			title: '身份证号',
			dataIndex: 'SFZH',
			key: 'SFZH',
		},
		{
			title: '所属专业部',
			dataIndex: 'YXMC',
			key: 'YXMC',
		},
		{
			title: '所属专业',
			dataIndex: 'ZYMC',
			key: 'ZYMC',
		},
		{
			title: '考试总分',
			dataIndex: 'KSZF',
			key: 'KSZF',
		},
		{
			title: '是否审核',
			dataIndex: 'isAdmit',
			key: 'isAdmit',
		},
		{
			title: '性别',
			dataIndex: 'XBM',
			key: 'XBM',
		},
		{
			title: '入学年份',
			dataIndex: 'RXNF',
			key: 'RXNF',
		},
		{
			title: '招生季',
			dataIndex: 'ZSJ',
			key: 'ZSJ',
		},
		{
			title: '学制',
			dataIndex: 'XZ',
			key: 'XZ',
		},
		{
			title: '操作',
			dataIndex: 'operator',
			width: '10%',
			key: 'operator',
			scopedSlots: {
				customRender: 'operator',
			},
		},
	]

	let data = []

	export default {
		data() {
			return {
				pagination: {
					current: 0,
					pageSize: 10,
					showSizeChanger: true,
					pageSizeOptions: ['6', '10', '20'],
					showTotal: (total, range) => {
						return '显示' + range[0] + '到' + range[1] + '条, 共' + total + '条记录'
					},
					showQuickJumper: true,
					total: 0,
				},
				//选中放入的数组
				selectedRowKeys: [],
				/* 页码 */
				currentPage: 1,
				pageSize: 10,

				/* 表格数据 */
				data,
				columns,
				/* 按钮大小 */
				size: 'small',
				/* 下拉框数据 */
				quarter: [],
				quarterId: [],
				faculty: [],
				facultyId: [],
				specialty: [],
				specialtyId: [],
				keys: [],
				keysVal: [],
				//是否被审核
				isAdmition: [],
				isAdmitionVal: [],
				/* 按条件搜索报到的数量 */
				reportCount: 0,
				/* 添加-弹出框数据 */
				visibleReport: false,
				visibleReportBySearch: false,
				visibleDelete: false,
				visible: false,
				loading: false,
				entityObj: {}, //弹窗对象
				entityObjTwo: {}, //弹窗对象二
				//搜索条件
				curQuarter: 0,
				curFaculty: 0,
				curSpecialty: 0,
				condit: '',
				isCheck: 2,
				/* 关键词 */
				keyword: '',
			}
		},
		mounted() {
			this.getStuList()
			this.getQuarter()
			this.getFaculty()
			this.addCondit()
			this.isAdmitQuery()
		},
		//关于全选与批量
		computed: {
			rowSelection() {
				const selectedRowKeys = this.selectedRowKeys //常量
				console.log('selectedRowKeys:', selectedRowKeys, this.selectedRowKeys)
				return {
					selectedRowKeys,
					onChange: this.onSelectChange,
				}
			},
		},
		components: {
			IconFont,
		},
		methods: {
			// 批量审核接口
			batchExamine(){
				var ids = ''
				for(var i = 0 ; i < this.selectedRowKeys.length; i++){
					console.log(this.selectedRowKeys[i])
					if(i == 0){
						ids+=this.selectedRowKeys[i]
					}else{
						ids+=','+this.selectedRowKeys[i]
					}
				}
				axios({
				   url: '/enroll/ApplyCheck/batchCheck',
				   method: 'post',
				   params: {
						ids:ids
				   },
				 }).then((res)=>{
					if(res.code == '200'){
						this.$message.success(res.result)
						this.selectedRowKeys = []
						this.getStuList()
					}else{
						this.$message.warning('批量审核失败')
					}
				})
			},
			batchPass(){
				var ids = ''
				for(var i = 0 ; i < this.selectedRowKeys.length; i++){
					console.log(this.selectedRowKeys[i])
					if(i == 0){
						ids+=this.selectedRowKeys[i]
					}else{
						ids+=','+this.selectedRowKeys[i]
					}
				}
				axios({
				   url: '/enroll/ApplyCheck/batchPass',
				   method: 'post',
				   params: {
						ids:ids
				   },
				 }).then((res)=>{
					if(res.code == '200'){
						this.$message.success(res.result)
						this.selectedRowKeys = []
						this.getStuList()
					}else{
						this.$message.warning('批量通过失败')
					}
				})
			},
			batchNoPass(){
				var ids = ''
				for(var i = 0 ; i < this.selectedRowKeys.length; i++){
					console.log(this.selectedRowKeys[i])
					if(i == 0){
						ids+=this.selectedRowKeys[i]
					}else{
						ids+=','+this.selectedRowKeys[i]
					}
				}
				axios({
				   url: '/enroll/ApplyCheck/batchNoPass',
				   method: 'post',
				   params: {
						ids:ids
				   },
				 }).then((res)=>{
					if(res.code == '200'){
						this.$message.success(res.result)
						this.selectedRowKeys = []
						this.getStuList()
					}else{
						this.$message.warning('批量不通过失败')
					}
				})
			},
			
			
			cascaderChange(e){
				if(this.facultyId.length < 1){
					this.$message.warning('请先选择专业部！')
				}
				console.log(e)
			},
			//start
			showMsg(a) {
				axios({
						url: 'enroll/reportMng/getInfoByID',
						method: 'post',
						params: {
							id: a.key,
						},
					})
					.then((res) => {
						this.entityObj = res.result
						this.entityObjTwo = a
						//数据加工处理
						let zslx = res.result.zslx == 1 ? '统一招生' : '自主招生'
						let jdfs = res.result.jdfs == 1 ? '住校' : '走读'
						let sfdb = res.result.sfdb == 1 ? '是' : '否'

						this.entityObj.zslx = zslx
						this.entityObj.jdfs = jdfs
						this.entityObj.sfdb = sfdb
						this.entityObj.country
					})
					.catch((err) => {
						this.$message.warning('获取招生信息失败')
					})
				this.visible = true
			},
			handleClose(e) {
				setTimeout(() => {
					this.visible = false
					this.loading = false
				})
			},
			handlePrint(e) {
				this.visible = false
			},
			// end
			onSelectChange(selectedRowKeys) {
				this.selectedRowKeys = selectedRowKeys
				console.log('selectedRowKeys changed: ', selectedRowKeys)
			},
			clear() {
				this.quarterId = []
				this.facultyId = []
				this.specialty = []
				this.specialtyId = []
			},
			empty() {
				this.keyword = ''
				this.keysVal = []
				this.isAdmitionVal = []
				this.clear()
			},
			batchCheck() {
				let ids = ''

				for (let i = 0; i < this.selectedRowKeys.length; i++) {
					ids += this.selectedRowKeys[i]
					if (i != this.selectedRowKeys.length - 1) {
						ids += ','
					}
				}

				axios({
						url: 'enroll/ApplyCheck/batchCheck',
						method: 'post',
						params: {
							ids: ids,
						},
					})
					.then((res) => {
						this.$message.success(res.result)
						//清空勾选项
						this.selectedRowKeys = []
						this.getStuList()
					})
					.catch((err) => {
						this.$message.warning('批量审核失败')
					})
			},
			search() {
				this.currentPage = 1
				this.curQuarter = this.quarterId.length == 0 ? 0 : this.quarterId[0]
				this.curFaculty = this.facultyId.length == 0 ? 0 : this.facultyId[0]
				this.curSpecialty = this.specialtyId.length == 0 ? 0 : this.specialtyId[0]
				this.condit = this.keysVal[0] == undefined ? 'XM' : this.keysVal[0]
				this.isCheck = this.isAdmitionVal[0] == undefined ? 2 : this.isAdmitionVal[0]

				this.getStuList()
			},
			refresh() {
				console.log(this.selectedRowKeys)
				this.selectedRowKeys = []
				this.getStuList()
			},
			showModalReport() {
				if (this.selectedRowKeys.length == 0) {
					console.log(this.selectedRowKeys)
					this.$message.warning('请选择要审核的学生！')
					return
				}

				this.visibleReport = true
			},
			handleOkReport() {
				this.batchCheck()
				this.visibleReport = false
			},
			closeReport() {
				this.visibleReport = false
			},

			handleOkReportBySearch() {
				this.batchReportBySearch()
				this.visibleReportBySearch = false
			},
			showModalDelete() {
				if (this.selectedRowKeys.length == 0) {
					this.$message.warning('请选择要删除的学生！')
					return
				}

				this.visibleDelete = true
			},
			handleOkDelete() {
				this.deleteStu()
				this.visibleDelete = false
			},

			tableChange(pagination) {
				/* , filters, sorter */
				this.pagination.current = pagination.current
				this.pagination.pageSize = pagination.pageSize
				this.currentPage = pagination.current
				this.pageSize = pagination.pageSize

				this.getStuList()
			},
			getStuList() {
				let currentPage = this.currentPage
				let pageSize = this.pageSize

				axios({
						url: 'enroll/ApplyCheck/applyMsg',
						method: 'post',
						params: {
							quarterId: this.curQuarter,
							facultyId: this.curFaculty,
							specialtyId: this.curSpecialty,
							keyword: this.keyword,
							condit: this.condit,
							currentPage: currentPage,
							pageSize: pageSize,
							isCheck: this.isCheck,
						},
					})
					.then((res) => {
						if (res.code == 200) {
							data.splice(0, data.length)

							for (let stu of res.result.list) {
								let sex = stu.xbm == 1 ? '男' : '女'
								let isAdmit = stu.isCheck == 1 ? '已审核' : 
											  stu.isCheck == 0 ? '未审核' : 
											  stu.isCheck == 2 ? '待审核': 
											  stu.isCheck == 3 ? '未通过' : '错误'
								data.push({
									key: stu.id,
									XM: stu.xm,
									SFZH: stu.sfzh,
									YXMC: stu.yxmc,
									ZYMC: stu.zymc,
									KSZF: stu.kszf,
									isAdmit: isAdmit,
									XBM: sex,
									RXNF: stu.rxnf,
									ZSJ: stu.zsj,
									XZ: stu.xz,
								})
							}
							this.pagination.current = currentPage
							this.pagination.total = res.result.count
							return
						}
						this.$message.warning(res.message)
					})
					.catch((err) => {
						this.$message.warning('获取学生列表失败')
					})
			},
			isAdmitQuery() {
				for (let k of [{
							value: 2,
							label: '全部'
						},
						{
							value: 1,
							label: '已审核'
						},
						{
							value: 0,
							label: '未审核'
						},
					]) {
					this.isAdmition.push({
						value: k.value,
						label: k.label,
					})
				}
			},
			addCondit() {
				for (let k of [{
							value: 'XM',
							label: '姓名'
						},
						{
							value: 'SFZH',
							label: '身份证号'
						},
					]) {
					this.keys.push({
						value: k.value,
						label: k.label,
					})
				}
			},

			getQuarter() {
				axios({
						url: 'enroll/reportMng/getQuarter',
						method: 'post',
						params: {},
					})
					.then((res) => {
						for (let quarter of res.result) {
							this.quarter.push({
								value: quarter.id,
								label: quarter.name,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取招生季失败')
					})
			},
			getFaculty() {
				axios({
						url: 'enroll/reportMng/getFaculty',
						method: 'post',
						params: {},
					})
					.then((res) => {
						//this.faculty.splice(0, this.faculty.length);
						for (let faculty of res.result) {
							this.faculty.push({
								value: faculty.id,
								label: faculty.yxmc,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取专业部失败')
					})
			},
			facultyChange(value) {

				this.specialty = []
				this.specialtyId = []

				if (value.length == 0) {
					return
				}

				axios({
						url: 'enroll/reportMng/getSpecialty',
						method: 'post',
						params: {
							facultyId: this.facultyId[0],
						},
					})
					.then((res) => {
						this.specialty.splice(0, this.specialty.length)
						for (let specialty of res.result) {
							this.specialty.push({
								value: specialty.id,
								label: specialty.zymc,
							})
						}
					})
					.catch((err) => {
						this.$message.warning('获取专业失败')
					})
			},
		},
	}
</script>
<style>
	.icon_btn {
		color: #ffffff;
		font-size: 16px;
		margin-right: 20px;
		width: 88px;
		height: 34px;
	}
	
	.icon_btn_type_2 {
		color: #ffffff;
		font-size: 16px;
		margin-right: 20px;
		height: 34px;
	}
</style>	
